<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${path}/static/lib/layui/css/layui.css"/>
</head>
<body>
	<form class="layui-form layui-form-pane" id="insert_form" onsubmit="return false">
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品名称</label>
	    <div class="layui-input-block">
	      <input type="text" name="name" autocomplete="off" placeholder="请输入标题" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品附标题</label>
	    <div class="layui-input-block">
	      <input type="text" name="subtitle" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品分类</label>
	    <div class="layui-input-inline">
	      <select id="topCategory" lay-filter="topCategoryFilter">
	     	 <option value="">--请选择一级分类--</option>
	      </select>
	    </div>
	    <div class="layui-input-inline">
	      <select name="categoryId" id="secondCategory">
	        <option value="">--请选择二级分类--</option>
	      </select>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品价格</label>
	    <div class="layui-input-block">
	      <input type="text" name="price" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品库存</label>
	    <div class="layui-input-block">
	      <input type="text" name="stock" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	 <div class="layui-form-item" pane="">
	    <label class="layui-form-label">商品状态</label>
	    <div class="layui-input-block">
	      <input type="radio" name="status" value="1" title="上架" checked="">
	      <input type="radio" name="status" value="2" title="下架">
	    </div>
	  </div>
	   <div class="layui-form-item" pane="">
	    <label class="layui-form-label">商品主图</label>
	    <input type="hidden" id="mainImage"  name="mainImage">
	    <div class="layui-input-block layui-upload">
		  <button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
		  <div class="layui-upload-list">
		    <img class="layui-upload-img" width="150px" height="150px" id="mainImg">
		    <p id="demoText"></p>
		  </div>
		</div> 
	  </div>
	  <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">商品详情</label>
	    <div class="layui-input-block">
	      <textarea placeholder="请输入内容" name="detail" class="layui-textarea"></textarea>
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <button class="layui-btn" lay-submit="" onclick="submitForm()" lay-filter="demo2">跳转式提交</button>
	  </div>
	</form>
	
	<script src="${path}/static/lib/jquery/jquery-1.11.1.js"></script>
	<script src="${path}/static/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script src="${path}/static/common/mylayer.js"></script>
	<script src="${path}/static/lib/kindeditor/kindeditor.js"></script>
    <script src="${path}/static/lib/kindeditor/lang/zh_CN.js"></script>
	<script type="text/javascript">
		var form;
		layui.use(['form','upload'], function(){
		  form = layui.form;
		  var upload = layui.upload;
		  
		  form.render("select");//刷新select选择框渲染
		  //监听select选择
		  //下拉选择框被选中时候触发，回调函数返回一个Object参数
		  form.on("select(topCategoryFilter)", function(data) {
			  console.log(data.elem);//得到select原始DOM对象
			  console.log(data.value);//得到被选中的值
			  $.ajax({
					url : "${pageContext.request.contextPath}/category/selectSecondCategory.action",
					data : {"topCategoryId":data.value},
					type : "POST",
					dataType : "json",
					success : function(resp) {
						console.log(resp);
						if(resp.code == 0) {
							var html = "<option value=''>--请选择二级分类--</option>";
							var data = resp.data;
							for (var i = 0; i < data.length; i++) {
								html += "<option value='"+data[i].id+"'>"+data[i].name+"</option>";
							}
							$("#secondCategory").html(html);
							form.render("select");//刷新select选择框渲染
						} else {
							mylayer.error(resp.msg);
						}
					}
				});
		   });
		  
		  
		  //普通图片上传
		  var uploadInst = upload.render({
		    elem: '#uploadBtn'
		    ,url: '${pageContext.request.contextPath}/upload/uploadImg.action'
		    ,before: function(obj){
		      //预读本地文件示例，不支持ie8
		      obj.preview(function(index, file, result){
		        $('#mainImg').attr('src', result); //图片链接（base64）
		      });
		    }
		    ,done: function(resp){
		      if(resp.code == 0) {
		    	  $("#mainImage").val(resp.data);
		      }
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		      var demoText = $('#demoText');
		      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      demoText.find('.demo-reload').on('click', function(){
		        uploadInst.upload();
		      });
		    }
		  });
		  
		});
		
		$(function() {
			//加载一级分类
			$.ajax({
				url : "${pageContext.request.contextPath}/category/selectTopCategory.action",
				type : "POST",
				dataType : "json",
				success : function(resp) {
					console.log(resp);
					if(resp.code == 0) {
						var html = "<option value=''>--请选择一级分类--</option>";
						var data = resp.data;
						for (var i = 0; i < data.length; i++) {
							html += "<option value='"+data[i].id+"'>"+data[i].name+"</option>";
						}
						$("#topCategory").html(html);
						form.render("select");//刷新select选择框渲染
					} else {
						mylayer.error(resp.msg);
					}
				}
			});
		});
		
		function submitForm() {
			$.ajax({
				url : "${pageContext.request.contextPath}/product/insert.action",
				data : $("#insert_form").serialize(),
				type : "POST",
				dataType : "json",
				success : function(resp) {
					if(resp.code == 0) {
						mylayer.success(resp.msg);
						var index = parent.layer.getFrameIndex(window.name);
			  			//定时一秒后执行
		                setTimeout(function() {
		            	  //关闭当前弹出层
		                  parent.layer.close(index);
		                  //刷新父页面,刷新table
		                  window.parent.location.reload();
		                }, 1000);
					} else {
						mylayer.error(resp.msg);
					}
				}
			});
		}
		
		//富文本编辑器
		var myKindEditor ;
        KindEditor.ready(function(K) {
            var kingEditorParams = {
                 //指定上传文件参数名称
                 filePostName  : "file",
                 //指定上传文件请求的url。
                 uploadJson : '${path}/upload/uploadImgByEditor.action',
                 //上传类型，分别为image、flash、media、file
                 dir : "image",
                 afterBlur: function () { this.sync(); }
           }
           var editor = K.editor(kingEditorParams);
           
          //富文本编辑器
          myKindEditor = KindEditor.create('#insert_form[name=detail]', kingEditorParams);
        });
			
	</script>
</body>
</html>